interface REFS {
    bpmnViewer: YvanUI.CtlBpmn
}

interface INP {
    timeLineData: any[]
    bpmnUrl: string
}


@YvanUI.BizModule()
export default class VerticalDialog extends YvanUI.BaseDialog<VerticalDialog, REFS, INP> {

    bpmnXML = '';

    /**
     * timeline
     */
    tempItem: any;

    timelineClick(id: any) {
        // const item =  $("g[data-element-id=" + id + "]");
        // const itemChilds = item.find('.djs-hit');
        // $(itemChilds[0]).css(
        //     "fill", "red"
        // )
    }

    timelineMouseMove(id: any) {
        const item =  $("g[data-element-id=" + id + "]");
        const itemChilds = item.find('.djs-hit');

        if (this.tempItem && this.tempItem !== itemChilds[0]) {
            $($(this.tempItem ).prev().find('rect')[0]).attr('class','')
        }
        this.tempItem = itemChilds[0];
        $($(this.tempItem ).prev().find('rect')[0]).attr('class','rect-hover-bg')
    }

    timelineMouseMoving(param: any) {
        // console.log("timelineMouseMoving", param)
    }

    timelineMouseOut(param: any) {
        // console.log("timelineMouseOut", param)
        $($(this.tempItem ).prev().find('rect')[0]).attr('class','')
    }

    onDataUpdate(param: any) {
        // console.log("onDataUpdate", param)
    }

    onItemRender(param: any) {
        // console.log("onItemRender", param)
    }
    onAfterRender(param:any){
        $('.webix_timeline_left').css({'position':'relative','height':'90px'});
    }

    /**
     * bpmn
     */
    loadSuccess() {
        // attach an overlay to a node
        // this.refs.bpmnViewer.bpmnOverlays.add('Activity_1', 'note', {
        //     position: {
        //         bottom: 0,
        //         right: 0
        //     },
        //     html: '<div class="diagram-note" style="color:red">加载完成</div>'
        // });
        // add marker
        // this.refs.bpmnViewer.bpmnCanvas.addMarker('Activity_2', 'needs-discussion');
    }

    loadFailed() {

    }

    itemClick(sender:any,  item: any) {
        this.refs.bpmnViewer.bpmnOverlays.add(item.id, 'note', {
            position: {
                bottom: 0,
                right: 0
            },
            html: '<div class="diagram-note">被点击了</div>'
        });
    }

    itemHover(sender:any, item: any) {
        let isContains = false;
        _.forEach(this.inParamter.timeLineData, item => {
            if (_.values(item).indexOf(item.id) != -1) {
                isContains = true;
                return false;
            }
        });
        if (!isContains) {
            return;
        }
        const timeDiv =  $("div[webix_tl_id=" + item.id + "]");

        $(timeDiv).css(
            "background-color","lightblue"
        )
    }

    itemOut(sender:any, item: any) {
        let isContains = false;
        _.forEach(this.inParamter.timeLineData, item => {
            if (_.values(item).indexOf(item.id) != -1) {
                isContains = true;
                return false;
            }
        });
        if (!isContains) {
            return;
        }
        const timeDiv =  $("div[webix_tl_id=" + item.id + "]");

        $(timeDiv).css("background-color", "")
    }

    zoomBig() {
        this.refs.bpmnViewer.handleZoomBig();
    }

    zoomSmall() {
        this.refs.bpmnViewer.handleZoomSmall();
    }

    zoomOrigin() {
        this.refs.bpmnViewer.handleZoomReset();
    }

    viewResolver(): any {
        return {
            title: `VerticalDialog`,
            modal: false,
            width: 700,
            height: 550,
            body: {
                padding: 0,
                rows: [
                    {
                        cols: [
                            {
                                view: "button",
                                text: "放大",
                                icon: "fa fa-bars",
                                onClick: { type: "function", bind: "zoomBig" },
                            },
                            {
                                view: "button",
                                text: "缩小",
                                icon: "fa fa-bars",
                                onClick: { type: "function", bind: "zoomSmall" },
                            },
                            {
                                view: "button",
                                text: "还原",
                                icon: "fa fa-bars",
                                onClick: { type: "function", bind: "zoomOrigin" },
                            },
                            {}
                        ]
                    },
                    {
                        view: 'bpmn',
                        ctlName: 'bpmnViewer',
                        onSuccess: {
                            type: 'function',
                            bind: 'loadSuccess'
                        },
                        onFailed: {
                            type: 'function',
                            bind: 'loadFailed'
                        },
                        onClick: {
                            type: 'function',
                            bind: 'itemClick'
                        },
                        onHover: {
                            type: 'function',
                            bind: 'itemHover'
                        },
                        onOut: {
                            type: 'function',
                            bind: 'itemOut'
                        }
                    },
                    {
                        view: "resizer"
                    },
                    {
                        cols: [
                            {
                                view:"timeline",
                                // width: 500,
                                // tooltip:"#extra#",
                                borderless:true,
                                css: 'mycustomcss',
                                type:{
                                    lineColor:function(obj){
                                        if(obj.value == "Available") return "#55CD97";
                                        if(obj.value == "Taken") return "#1CA1C1";
                                        if(obj.value == "Broken") return "#FF5C4C";
                                        if(obj.value == "Fixed") return "orange";
                                        if(obj.value == "Deprecated") return "#94A1B3";
                                    },
                                    width: 200,
                                    // templateDate: '<div style="width: 100px;">#date#</div>',
                                    // templateValue: '#value#',
                                    template: `<div style="left:10px; width:99px;float:left" class="webix_timeline_date"><div style="width: 100px;">#date#</div></div>
<svg width="145px" height="84px" style="position: absolute;top:0">
<line x1="133px" y1="15" x2="133px" y2="73" class="webix_timeline_node" style="stroke-width:2px; stroke:#1CA1C1;"></line>
<circle cx="133px" cy="9" r="6" class="webix_timeline_node webix_timeline_point" style="stroke-width:2px; stroke:#1CA1C1; fill:transparent;"></circle>
</svg>
<div style="height:58px;margin-top: -20px;margin-left:150px">
<div class="webix_timeline_value">#value#</div>
<div class="webix_timeline_details">#details#</div>
</div>
<div style="clear:both"></div>`
                                },
                                on:{
                                    onItemClick:this.timelineClick,
                                    onMouseMove: this.timelineMouseMove,
                                    onMouseMoving: this.timelineMouseMoving,
                                    onMouseOut: this.timelineMouseOut,
                                    onDataUpdate: this.onDataUpdate,
                                    onItemRender: this.onItemRender,
                                    onAfterRender: this.onAfterRender
                                },
                                mouseEventDelay: 1,
                                onMouseMove:{},
                                scheme:{
                                    $init:function(obj){
                                        obj.$css = obj.value;
                                        // obj.extra = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus."
                                    }
                                },
                                data: this.inParamter.timeLineData
                            },
                            // {
                            //     view: "resizer"
                            // },
                            // {}
                        ]
                    }
                ]
            }
        };
    }

    onLoad() {
        super.onLoad();
        const diagramUrl = this.inParamter.bpmnUrl;
        $.get(diagramUrl, this.openDiagram, 'text');
    }

    openDiagram(bpmnXML) {
        this.bpmnXML = bpmnXML;
        this.refs.bpmnViewer.openDiagram(this.bpmnXML);
    }

    onClose() {
    }
}